<template>
	<view class="content">
		<view class="tabs">
			<view class="navTab">
				<block v-for="(item,index) in scrollList" :key="index">
					<view class="tab-item" :class="{'at-tab-item':current == index}" @click="tabChange(index)">
						{{item.name}}
					</view>
				</block>
				<view class="tab-bottom" :style="[{left:left+'px'},{width:width+'px'}]">
					<view class="xian" :style="{width:width/7+'px'}"></view>
				</view>
			</view>
		</view>
		<!-- 订单列表 -->
		<view class="order-list">
			<block v-for="(item,index) in list" :key="index">
				<view class="list-item" @click="goUser(item.id)">
					<view class="head">
						<text class="t1">订单号：{{item.order_no}}</text>
						<text class="t2">{{item.leixing}}</text>
					</view>
					<view class="order-user">
						<view class="user tn-flex">
							<view class="user-left">
								<image :src="item.goodsimage" mode="">
								</image>
							</view>
							<view class="user-right tn-flex">
								<view class="name tn-text-ellipsis-2">{{item.goods_name}}</view>
								<view class="price-num">
									<view class="price">
										<text class="p2">￥</text>
										<text class="p1">{{item.goods_price}}</text>
									</view>
									<view class="num">x1</view>
								</view>

							</view>
						</view>
						<view class="foot tn-flex">
							<view class="btn1" v-if="item.zhuangtai">{{item.zhuangtai}}</view>

							<view class="btn2">查看详情</view>

							<!-- <view class="btn1">确认收货</view> -->
						</view>
					</view>
				</view>
			</block>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollList: [{
						name: '全部'
					},
					{
						name: '进行中',
					},
					{
						name: '已完成',
					}
				],
				current: 0,
				width: 0,
				left: 0,
				itemNode: '',
				page: 1,
				list: []
			}
		},
		onLoad() {
			this.getOrderList(1)
		},
		onReady() {
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.tab-item').boundingClientRect(data => {
					this.itemNode = data
					this.width = data[this.current].width
				}).exec();
			}, 500)
		},
		methods: {
			async getOrderList(loading) {
				try {
					let result = await this.$request({
						loading,
						method: 'post',
						url: '/api/shop/my_order',
						data: {
							type: this.current,
							page: this.page
						}
					})
					let data = result.data.data.data
					if (this.page == 1) {
						this.list = data
					}
					console.log(result)
				} catch (e) {
					console.log(e)
				}

			},
			tabChange(index) {
				this.current = index
				this.left = this.itemNode[index].left
				this.page = 1
				this.getOrderList()
			},
			goUser(id) {
				uni.navigateTo({
					url: "/playcenterPage/goods-order-user?id="+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.tabs {
			position: sticky;
			/* #ifdef H5 */
			top: 44px;
			/* #endif */
			/* #ifndef H5 */
			top: 0;
			/* #endif */
			z-index: 10;

		}

		.navTab {
			display: flex;
			align-items: center;
			height: 105rpx;
			position: relative;
			background-color: #ffffff;

			.tab-item {
				width: 33%;
				text-align: center;
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
			}

			.at-tab-item {
				font-size: 36rpx;
				color: $uni-text-color;

			}

			.tab-bottom {
				position: absolute;
				bottom: 12rpx;
				transition: left .2s linear;
				display: flex;
				justify-content: center;

				.xian {
					height: 8rpx;
          background: linear-gradient(90deg, #080808 0%, #080808 100%);
					border-radius: 60rpx;
				}
			}
		}

		.order-list {
			padding: 32rpx;

			.list-item {
				background-color: #211C37;
				border-radius: 16rpx;
				margin-bottom: 24rpx;

				.head {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 88rpx;
					padding: 0 24rpx;
					border-bottom: 1px solid #343541;

					.t1 {
						font-size: 28rpx;
						font-weight: 500;
						color: #FFFFFF;
					}

					.t2 {
						font-size: 28rpx;
						font-weight: 400;
						color: #CCCCCC;
					}
				}

				.order-user {
					padding: 24rpx;

					.user {
						.user-left {
							image {
								width: 200rpx;
								height: 200rpx;
								border-radius: 10rpx;
							}
						}

						.user-right {
							padding-left: 24rpx;
							flex-direction: column;
							justify-content: space-between;

							.name {
								font-size: 30rpx;
								font-weight: bold;
								color: #FFFFFF;

							}

							.price-num {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.num {
									font-size: 28rpx;
									font-weight: 400;
									color: #CCCCCC;
								}
							}



							.price {
								color: #FBE12B;
								font-weight: bold;

								.p1 {
									font-size: 40rpx;
								}

								.p2 {
									font-size: 24rpx;
								}
							}
						}
					}

					.foot {
						align-items: center;
						justify-content: flex-end;
						margin-top: 24rpx;

						.t1 {
							font-size: 28rpx;
							font-weight: 400;
							color: #FFFFFF;
						}

						.btn1 {
							width: 160rpx;
							height: 60rpx;
							border-radius: 30rpx;
							background: #9D5EF4;
							font-size: 28rpx;
							font-weight: 400;
							color: #FFFFFF;
							text-align: center;
							line-height: 60rpx;
							margin: 0 24rpx;
						}

						.btn2 {
							width: 160rpx;
							height: 60rpx;
							border-radius: 30rpx;
							background: rgba(157, 94, 244, 0);
							border: 1px solid #9D5EF4;
							font-size: 28rpx;
							font-weight: 400;
							color: #9D5EF4;
							line-height: 60rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>
